<template>
  <div>
    <el-table
      :data="localData"
      v-bind="tableAttribute"
      v-loading="tableLoading"
      element-loading-text="拼命加载中..."
      style="width: 100%"
    >
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :prop="item.field"
        :label="item.label"
        v-bind="item.attribute"
      >
        <template #default="scope">
          <template v-if="item.template && item.field !== 'right'">
            <template v-if="item.template.tooltip">
              <el-tooltip
                v-if="scope.row[item.field]"
                class="box-item"
                effect="dark"
                :content="scope.row[item.field]"
                placement="top"
                v-bind="item.template.tooltip.attribute"
              >
                <span>{{
                  StringUtils.truncate(scope.row[item.field], item.template.tooltip.length, '...')
                }}</span>
              </el-tooltip>
            </template>
            <template v-if="item.template.component == ElIcon">
              <el-icon>
                <component :is="scope.row[item.field]" />
              </el-icon>
            </template>
            <template v-else-if="item.template.component">
              <!--自定义组件-->
              <component
                :is="item.template.component"
                v-bind="item.template.options(scope.row)"
                v-model="scope.row[item.field]"
              >
                <template v-if="item.formatter">
                  {{ item.formatter ? item.formatter(scope.row) : scope.row[item.field] }}
                </template>
              </component>
            </template>
          </template>

          <template v-else-if="item.formatter">
            {{ item.formatter ? item.formatter(scope.row) : scope.row[item.field] }}
          </template>
          <template v-if="item.field === 'right' && item.template">
            <el-button
              v-for="(ele, index) in item.template.options"
              :key="index"
              v-bind="ele"
              :size="ele.size || 'default'"
              @click.stop="() => callMethod(toRaw(scope.row), ele.method)"
            >
              <template v-if="ele.label">
                {{ ele.label }}
              </template>
              <template v-else-if="ele.formatter">
                {{ ele.formatter ? ele.formatter(scope.row) : scope.row[item.field] }}
              </template>
            </el-button>
          </template>
        </template>
      </el-table-column>
      <slot></slot>
    </el-table>
  </div>
</template>

<script lang="ts">
/**
 * 表格列 类型
 * @property {string} field - 表格字段
 * @property {string} label - 表格标题
 * @property {number} width - 表格宽度
 * @property {TableTemplate} template - 表格模板
 * @property {any} formatter - 表格格式化
 * @property {any} attribute - 表格栏属性
 */
export interface TableColumn {
  field: string
  label: string
  template?: TableTemplate
  formatter?: (row: any) => any
  attribute?: any
}

/**
 * 表格模板自定义
 * @property {any} component - 组件类型
 * @property {any} options - 组件选项
 */
export interface TableTemplate {
  component?: any
  options?: any
  tooltip?: any
}
</script>

<script setup lang="ts">
// ----------------------------------导入区---------------------------------
import { computed, toRaw } from 'vue'
import { ElButton, ElIcon } from 'element-plus'
import StringUtils from '@/utils/StringUtils'

// ----------------------------------数据区---------------------------------
defineProps<{
  tableColumn: TableColumn[]
  tableAttribute?: any
  tableLoading?: boolean
  pageAttribute?: any
}>()
const data = defineModel('tableData')
const localData = computed<any[]>(() => data.value as any[])
// eslint-disable-next-line vue/valid-define-emits
let emits = defineEmits()

// ----------------------------------方法区---------------------------------
const callMethod = (row: object, method: string) => {
  emits(method, row)
}
</script>

<style scoped></style>
